<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>对话间</title>
    <link rel="icon" href="icon/chat.ico">
    <link rel="stylesheet" href="style/chat-style.css">
    <link rel="stylesheet" href="chat-icon/style.css">
    <!--[if lt IE 9 ]>
    <script src="js/html5shiv.min.js"></script>
    <![endif]-->
    <script src="js/lib-flexible.js"></script>
    <style>
        .send {
            padding: 1em;
            -webkit-box-shadow: 0 0 5px 0 #cccccc;
            -moz-box-shadow: 0 0 5px 0 #cccccc;
            box-shadow: 0 0 5px 0 #cccccc;
            background: #ffffff;
        }
        .send textarea {
            margin-bottom: 1em;
            width: 100%;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            resize: none;
        }
        .send .flex-item { overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; }
        .send .flex-item + div > button { margin-left: .5em; }
        .send [class*="chat-icon-"] { line-height: inherit; vertical-align: middle; font-size: 20px; }

        .message { padding: 1em; }
        .message-item {
            margin: 1em 0;
        }
        .message-item img {
            display: block;
            width: 3.2em;
            height: 3.2em;
            -webkit-border-radius: 1.6em;
            -moz-border-radius: 1.6em;
            border-radius: 1.6em;
        }
        .message-item p {
            word-break: break-all;
            padding: 10px;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 0 5px 0 #cccccc;
            -moz-box-shadow: 0 0 5px 0 #cccccc;
            box-shadow: 0 0 5px 0 #cccccc;
            background: #ffffff;
        }
        .message-item p [class*="chat-icon-"] { line-height: inherit; vertical-align: middle }
        .message > div:first-child { margin-top: 0; }
        .message > div:last-child { margin-bottom: 0; }
    </style>
</head>
<body>
<div id="app" class="chat-wrap bg-grey" v-cloak>
    <div class="chat-content box-shadow bg-grey animated animated-pageIn">
        <header><button onclick="history.go(-1)" class="chat-header-btn__left chat-icon-turn-left"></button>对话间</header>
        <div class="chat-body">
            <div class="send">
                <textarea v-model="send_message" rows="3" maxlength="200" placeholder="我想说……"></textarea>
                <div class="flex">
                    <div class="flex-item clear-after"></div>
                    <div>
                        <button class="chat-icon-circle-image"></button>
                        <button class="chat-icon-circle-smile"></button>
                        <button @click="sendSubmit" class="chat-icon-circle-send"></button>
                    </div>
                </div>
            </div>
            <div class="message">
                <div v-for="(i, index) in message" class="message-item">
                    <div class="flex">
                        <div v-if="i.type === 1"><img src="" :src="i.image" alt="头像" style="margin-right: 1em"></div>
                        <div class="flex-item"><p class="color-light" v-html="i.content"></p></div>
                        <div v-if="i.type === 2"><img src="" :src="i.image" alt="头像" style="margin-left: 1em"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            send_message: '',
            message: [
                {
                    type: 1,
                    image: 'chat.ico',
                    name: 'lotency',
                    time: '2018.07.06 14:33',
                    saved: false,
                    content: '<span class="chat-icon-fire"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.'
                },
                {
                    type: 1,
                    image: 'chat.ico',
                    name: 'lotency',
                    time: '2018.07.06 14:33',
                    saved: true,
                    content: '我就：<span class="chat-icon-circle-smile"></span>。'
                },
                {
                    type: 2,
                    image: 'chat.ico',
                    name: 'lotency',
                    time: '2018.07.06 14:33',
                    saved: false,
                    content: '我就：<span class="chat-icon-circle-smile"></span>。'
                },
                {
                    type: 1,
                    image: 'chat.ico',
                    name: 'lotency',
                    time: '2018.07.06 14:33',
                    saved: true,
                    content: '一花一世界，一树一菩提。'
                },
                {
                    type: 2,
                    image: 'chat.ico',
                    name: 'lotency',
                    time: '2018.07.06 14:33',
                    saved: false,
                    content: '我就：<span class="chat-icon-circle-smile"></span>。'
                },
                {
                    type: 1,
                    image: 'chat.ico',
                    name: 'lotency',
                    time: '2018.07.06 14:33',
                    saved: false,
                    content: '有人在吗？'
                }
            ]
        },
        methods: {
            sendSubmit: function () {
                console.log(this.send_message);
                this.send_message = '';
            }
        }
    });
</script>
</body>
</html>
